<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" href="static/css/base.css">
    <script src="static/js/jquery.js"></script>
    <script src="static/js/ajax.js"></script>
    <script src="static/layui/layui.js"></script>
</head>
<body>
<div class="layui-panel">
    <form class="layui-form" style="margin: 10px auto">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="applyDriverId" class="layui-form-label">司机</label>
                <div class="layui-input-inline">
                    <select name="applyDriverId" id="applyDriverId">
                        <option value="">[选择司机]</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label for="applyCarId" class="layui-form-label">车辆</label>
                <div class="layui-input-inline">
                    <select name="applyCarId" id="applyCarId">
                        <option value="">[选择车辆]</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label for="applyStatus" class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="applyStatus" id="applyStatus">
                        <option value="">[选择状态]</option>
                        <option value="1">已申请</option>
                        <option value="2">负责人拒绝</option>
                        <option value="3">负责人同意</option>
                        <option value="4">管理员拒绝</option>
                        <option value="5">管理员同意</option>
                        <option value="6">已还车</option>
                        <option value="7">流程异常</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button type="submit" lay-submit lay-filter="searchBtn" class="layui-btn">查询</button>
                    <button type="reset" class="layui-btn">清空</button>
                </div>
            </div>
        </div>

    </form>
</div>
<div class="layui-panel">
    <table id="dataTable"></table>
</div>
</body>
<script type="text/html" id="optTemp">
    <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="detail">详情</button>
</script>
<script>
    const {table, form} = layui;
    $(function () {
        table.render({
            elem: "#dataTable",
            url: "apply/all/page",
            page: true,
            limit: 5,
            limits: [5, 10, 20, 50, 100],
            toolbar: true,
            cols: [[
                {field: "id", title: "编号"},
                {
                    field: "applyInfo", title: "申请人", templet: function (d) {
                        return d.applyInfo.nickname
                    }
                },
                {
                    field: "applyDriver", title: "申请司机", templet: function (d) {
                        if (d.applyDriver == 1) {
                            return "自驾";
                        } else {
                            return d.applyDriverInfo?.nickname
                        }
                    }
                },
                {
                    field: "applyCarInfo", title: "申请车辆", templet: function (d) {
                        return d.applyCarInfo?.carNo
                    }
                },
                {
                    field: "carInfo", title: "指派车辆", templet: function (d) {
                        return d.carInfo?.carNo || "未指派"
                    }
                },
                {
                    field: "driverInfo", title: "指派司机", templet: function (d) {
                        if (d.applyDriver == 1) {
                            return "自驾";
                        } else {
                            return d.driverInfo?.nickname || '未指派'
                        }
                    }
                },
                {
                    title: "用车时间", templet: function (d) {
                        return d.startTime + ' - ' + d.endTime
                    }
                },
                {
                    field: "status", title: "状态", templet: function (d) {
                        switch (d.applyStatus) {
                            case 1:
                                return "已申请";
                            case 2:
                                return "负责人拒绝";
                            case 3:
                                return "负责人同意";
                            case 4:
                                return "管理员拒绝";
                            case 5:
                                return "管理员同意";
                            case 6:
                                return "已还车";
                            default:
                                return "申请订单异常";
                        }
                    }
                },
                {title: "操作", templet: "#optTemp"}
            ]]
        });
        table.on("tool(dataTable)", function (data) {
            const event = data.event;
            const id = data.data.id;
            switch (event) {
                case "detail":
                    layer.open({
                        type: 2,
                        content: "apply?type=detail#id=" + id,
                        area: ["600px", "500px"]
                    })
                    break;
            }

        })
        form.on("submit(searchBtn)", function (data) {
            table.reload("dataTable", {
                where: data.field,
                page: {
                    curr: 1
                }
            })
            return false;
        })
    })

    function reloadTable() {
        table.reload('dataTable');
    }
</script>
</html>

